/** https://reactjs.org/docs/hooks-effect.html#effects-without-cleanup
有时，我们希望在React更新DOM之后运行一些额外的代码。
+ 网络请求
+ 手动DOM突变
+ 日志记录

这些是不需要进行清理的常见效果示例。

我们这样说是因为我们可以运行它们,然后马上忘掉它们。

让我们来比较一下类和钩子是如何让我们表达这些副作用的。

Sometimes, we want to run some additional code after React has updated the DOM. Network requests, manual DOM mutations, and logging are common examples of effects that don’t require a cleanup. We say that because we can run them and immediately forget about them. Let’s compare how classes and Hooks let us express such side effects.

*/
import React, { useState, useEffect } from 'react';

/*
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}
*/

/* ↑ 上面的示例中我们需要在两个地方使用相同的代码,虽然我们能将方法抽离封装,但是扔需要调用两次*/


function Example() {
  const [count, setCount] = useState(0);

  /** By using this Hook, you tell React that your component needs to do something after render
   * 通过使用hooks,你就告诉了React你的组件需要在渲染后执行一些逻辑(副作用)*/
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
